// ** React Imports
import { useEffect, useState } from 'react'
import moment from 'moment'
import { useNavigate } from 'react-router-dom'

// ** Styles
import './index.scss'

const TopNav = () => {
  let timer = null
  const [time, setTime] = useState('')
  const navigate = useNavigate()

  useEffect(() => {
    getTime()
    return () => clearInterval(timer)
  }, [])

  const getTime = () => {
    timer = setInterval(() => {
      const newTime = moment().format('YYYY-MM-DD HH:mm:ss')
      setTime(newTime)
    }, 1000)
  }
  return (
    <div className="topNav">
      <div className="left">
        <span
          className="btn"
          onClick={() => {
            navigate('/')
          }}
        >
          首页
        </span>
      </div>
      <div className="center">
        <div className="title">党建可视化大数据平台</div>
      </div>
      <div className="right">
        <div className="btn"></div>
        <div className="time">当前时间：{time}</div>
      </div>
    </div>
  )
}

export default TopNav
